<template>
  <!--首次渲染动画加载-->
  <transition appear appear-from-class="from" appear-active-class="active" appear-to-class="to">
    <div class="box"></div>
  </transition>
  <hr>
  <transition appear appear-active-class="animate__animated animate__backInUp">
    <div class="box"></div>
  </transition>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style lang='scss' scoped>
.box {
  background-color: red;
  width: 300px;
  height: 300px;
}

.from {
  width: 0;
  height: 0;
}
.active {
  transition: all 1.5s ease-out;
}
.to {
  width: 300px;
  height: 300px;
}
</style>